<template>
	<view style="z-index: 99999;  width: 620rpx;">
		<view class="news-details" style="padding: 0 20rpx;">
			<u-popup v-model="comShowmask" @close="closeModal" mode="center" border-radius="14" width="700rpx"
				closeable="true" mask-close-able="false">
				<view class="popcontent">
					<view class="title">{{modalTitle}}</view>
					<u-parse :html="article_content" />
					<!-- <view class="u-col-center flex-col m-t-20 m-b-20">
						<u-radio-group v-model="read_agreement">
							<u-radio icon-size="26" name="read_agreement" active-color="#00632B">我已阅读并同意<text
									class="primary">《{{modalTitle}}》</text></u-radio>
						</u-radio-group>
					</view> -->
					<view class="u-col-center flex-col m-t-20">
						<!-- <view style="width: 200rpx;"><button class="my-btn bg-primary white br60"
								@tap="applyServies()">确定</button></view> -->
								<view style="width: 200rpx;"><button class="my-btn bg-primary white br60"
										@tap="closeModal()">确定</button></view>
					</view>
				</view>
			</u-popup>

		</view>
		<loading-view v-if="showLoading"></loading-view>
	</view>
</template>
<script>
	import {
		getArticleDetail,
		postGoodsService
	} from '@/api/store';
	export default {
		data() {
			return {
				read_agreement: '',
				modalTitle: '注意事项',
				showLoading: false,
				articleDetail: {},
				article_content: "",
				type: 1, //帮助1; 普通新闻0
				comShowmask: this.showmask,
				newaid: this.aid,
			};
		},
		components: {},
		props: {
			service_type: {
				type: Number,
				defaults: 0
			},
			goodsDetail: {
				type: Object,
				defaults: {
					item_id: 0
				}
			},
			aid: {
				type: Number,
				defaults: 0
			},
			showmask: {
				type: Boolean,
				defaults: false
			}
		},
		watch: {
			showmask(newVal, oldVal) {
				this.comShowmask = newVal;
			},
			aid(newVal, oldVal) {
				this.newaid = newVal;
				console.log('this.newaid-------' + this.newaid);
				this.showLoading = true;
				this.getArticleDetailFun();
			},
		},
		methods: {
			applyServies() {
				if (!this.goodsDetail || !this.goodsDetail.item_id) {
					this.$toast({
						title: "请先输入或扫码商品编号"
					});
					return;
				}
				if (!this.read_agreement) {
					this.$toast({
						title: "请阅读并勾选同意相关事项"
					});
					return;
				}
				if (!this.service_type) {
					this.$toast({
						title: "未获取服务类型"
					});
					return;
				}
				if (this.goodsDetail && this.goodsDetail.item_id) {
					this.$emit('hidePopMask')
					//跳转提交页面
					setTimeout(() => {
						// this.$Router.push('/bundle/pages/circulate/apply')
						this.$Router.push({
							path: '/bundle/pages/circulate/apply',
							query: {
								service_type: this.service_type,
								item_id:this.goodsDetail.item_id
							}
						})
					}, 200)
					return
				}
			},
			cancel() {
				this.closeModal();
			},
			confirm() {
				this.closeModal();
			},
			closeModal() {
				this.read_agreement = false;
				this.$emit('hidePopMask')
			},
			getArticleDetailFun() {
				getArticleDetail({
					type: this.type,
					// id: this.id,
					aid: this.newaid
				}).then(res => {
					if (res.code == 1) {
						this.articleDetail = res.data
						console.log('========getArticleDetailFun---res.data--------');
						console.log(res.data);
						this.article_content = res.data.content;
						this.modalTitle = res.data.title;
						setTimeout(() => {
							this.showLoading = false
						}, 100);
					}
				});
			},

			postGoodsServiceFun() {
				postGoodsService({
					item_id: this.goodsDetail.item_id,
					goods_num: 1,
					service_type: this.service_type
				}).then(res => {
					if (res.code == 1) {
						this.$toast({
							title: "提交成功"
						});
						//到列表页面
						setTimeout(() => {
							this.$Router.push('/pages/member/member')
						}, 1500)
						return
					} else {
						this.$toast({
							title: res.msg
						});
						setTimeout(() => {
							this.$Router.push('/pages/member/member')
						}, 1500)
						return
					}
				});
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}

	.news-details {
		padding: 20rpx 15px;
		line-height: 54rpx;

		.popcontent {
			background-color: #fff;
			padding: 40rpx;

			.title {
				margin: 30rpx 20rpx;
				font-size: larger;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}

			.content {}

		}
	}
</style>